<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/font_eolqem241z66flxr.css"
          media="all"/>
</head>
<body class="childrenBody">

<div class="layui-form-item" style="margin-top: 20px">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-block text1">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传头像</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" width="200px"
                     height="100px">
            </div>
        </div>
    </div>
</div>

<form class="layui-form" lay-filter="formtable">
    <div class="layui-form-item">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-block text1">
            <input type="text" name="username" class="layui-input"
                   lay-verify="required" placeholder="请输入"> <input
                type="hidden" name="id" id="id">
            <input type="hidden" name="head" id="head">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block text1">
            <input type="text" name="nickname" class="layui-input"
                   lay-verify="required" placeholder="请输入">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block text1">
            <input type="text" name="pass" class="layui-input"
                   lay-verify="required" placeholder="请输入">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话:</label>
        <div class="layui-input-block text1">
            <input type="text" name="tel" class="layui-input"
                   lay-verify="required" placeholder="请输入">
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">性别</label>-->
<!--        <div class="layui-input-block text1">-->
<!--            <select name="sex">-->
<!--                <option value="男">男</option>-->
<!--                <option value="女">女</option>-->
<!--            </select>-->
<!--        </div>-->
<!--    </div>-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="adddd">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
    layui
        .config({
            base: "js/"
        })
        .use(
            ['form', 'layer', 'jquery', 'layedit', 'laydate', 'upload'],
            function () {
                var form = layui.form, layer = layui.layer, laypage = layui.laypage, layedit = layui.layedit,
                    laydate = layui.laydate, $ = layui.jquery, upload = layui.upload;

                function getUParam(name, id) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
                    var r = decodeURIComponent(
                        $("#" + id).attr("src").substr(
                            $("#" + id).attr("src").indexOf("?"))
                            .substr(1)).match(reg); // 匹配目标参数
                    if (r != null)
                        return unescape(r[2]);
                    return ""; // 返回参数值
                }

                var id = "[[${modyid}]]";
                // 普通图片上传
                var uploadInst = upload
                    .render({
                        elem: '#test1',   //绑定元素
                        url: '/upload/file', //上传接口
                        before: function (obj) {
                            // 预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                $('#demo1').attr('src', result); // 图片链接（base64）
                            });
                        },
                        done: function (res) {
                            console.log("上传失败后后返回信息：" + res.code)
                            // 如果上传失败
                            if (res.code == 0) {
                                return layer.msg('上传失败');
                            }
                            // 上传成功
                            var pic = $('#head');
                            console.log("上传成功后反馈信息：")
                            console.log("" + res.data.src)
                            pic.val(res.data.src);
                        },
                        error: function () {
                            // 演示失败状态，并实现重传
                            var demoText = $('#demoText');
                            demoText
                                .html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click',
                                function () {
                                    uploadInst.upload();
                                });
                        }
                    });

                // 监听提交
                form.on('submit(adddd)', function (data) {
                    parent.resetSwClose(true);
                    layer.msg('正在保存。。。', {time: 1000}, function () {
                    });
                    var url = "";
                    if (id != '')
                        url = "/user/update";
                    else
                        url = "/user/add";
                    $.getJSON(url, data.field,
                        function (data) {
                            if (data.code == '200') {
                                parent.layer.closeAll();
                                parent.reloadList();
                            } else if (data.code=='300'){
                                layer.msg('用户已存在', {
                                    time: 1000
                                }, function () {
                                    alert(300)
                                });
                                parent.resetSwClose(false);
                            }else{
                                layer.msg('数据保存失败', {
                                    time: 1000
                                }, function () {
                                    alert(500)
                                });
                                parent.resetSwClose(false);
                            }
                        });
                    return false;
                });

                //获取信息
                if (id != '') {
                    $.getJSON("/user/get", "id=" + id, function (jsondata) {
                        if (jsondata.code == '200') {
                            console.log(JSON.stringify(jsondata.data));
                            //表单初始赋值
                            form.val('formtable', JSON.parse(JSON.stringify(jsondata.data)));
                            console.log("头像信息为："+JSON.parse(JSON.stringify(jsondata.data)).head)
                            $('#demo1').attr('src','/public/'+ JSON.parse(JSON.stringify(jsondata.data)).head);
                        } else {
                            $("#subpost").attr("disabled", "disabled").addClass("layui-btn-disabled");
                            layer.msg(jsondata.msg, {time: 2000}, function () {
                                parent.layer.closeAll('iframe');
                            });
                        }
                    });
                }


            })

</script>
</body>
</html>